<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="jquery-mobile/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css"/>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>


<script src="jquery-mobile/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="js/cordova-1.9.0.js" type="text/javascript"></script>
<script src="js/loadingIndicator.js" type="text/javascript"></script>

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJdC3CQ8R7WRBANw0QRgQjeWQrx08p1Gc&libraries=places&sensor=true">
</script>
    
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(e){
	//show loading dialog
	window.plugins.loadingIndicator.show();
	document.addEventListener("backbutton", onBackButton, false);
	init();
}
function onBackButton(e){
	e.preventDefault();
    navigator.app.backHistory();
    
}
function getUrlVars() {
    var vars = new Array();
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}


</script>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head>

<body>
<div data-role="page" id="place_details">
  <div data-role="header" data-position="fixed" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" onClick="navigator.app.backHistory();"></a></span>
    <h1>Place Details</h1>
    <span class="ui-btn-right"><input type="button" data-theme="c" onClick="confirm();" value="Confirm" /></a></span>
  </div>

  <div data-role="content">
    	<div class="ui-grid-a">
        	<div class="ui-block-a" style="width:30%">
            	<span id="icon">
                </span>
            </div>
            <div class="ui-block-b" style="width:70%">
            	<span id="details" class="center-wrapper">
                	<div id="name">name</div>
                    <div id="address">address</div>
                    <div id="phone_number">phone</div>
                    <div id="rating">rating</div>
                    <div id="distance">distance</div>
                    <div id="website">website</div>
                    <div id="url">url</div>
                    <div id="opening_hours"></div>
                </span>
            </div>
        </div>
        <div id="map_canvas" style="background:#0CC; display:block; width:100%; height:300px">
        </div>
  </div>  
</div>

<script type="text/javascript">
var myLat;
var myLng;

//made global for showmap function
var geometry;
var lat
var lng;
var formatted_addr;
function init(){
	var ref = getUrlVars()["ref"];
	myLat = getUrlVars()["myLat"];
	myLng = getUrlVars()["myLng"];
	fetch_place_details(ref);
}	
function fetch_place_details(ref){
	$.getJSON('https://maps.googleapis.com/maps/api/place/details/json?reference='+ref+'&sensor=true&key=AIzaSyCJdC3CQ8R7WRBANw0QRgQjeWQrx08p1Gc',function (data){				
		var status = data.status;
		
		//hide loading dialog
		window.plugins.loadingIndicator.hide();
		
		if(status === "OK"){

			var result = data.result;
						
			formatted_addr = result.formatted_address;
			$('#address').html(formatted_addr);
			
			var formatted_phone_number = result.formatted_phone_number;
			$('#phone_number').html('<a href="tel:'+formatted_phone_number+'">'+formatted_phone_number+'</a>');

			geometry = result.geometry;//object
				lat = geometry.location.lat;
				lng = geometry.location.lng;
			$('#distance').html('Distance: '+calcDistance(myLat,myLng,lat,lng)+'km');

			showMap();
			
			var icon = result.icon;
			$('#icon').html('<img src='+icon+' />');

			var id = result.id;
			var international_phone_number = result.international_phone_number;
			
			var name = result.name;
			$('#name').html('<h3>'+name+'</h3>');

			var rating = data.rating;
			if ( typeof rating !== "undefined") {
				$('#rating').html('Rating: '+rating+'/5');
			}else{
				$('#rating').html('Rating: N/A');
			}
			
			var url = result.url;			
			if ( typeof website !== "undefined") {
				$('#url').html('Google+ : <a href='+url+'>'+url+'</a>');
			}else{
				$('#url').html('Google+ : N/A');
			}
			
			var website = result.website;
			if ( typeof website !== "undefined") {
				$('#website').html('Website: <a href=\"'+website+'\">'+website+'</a>');
			}else{
				$('#website').html('Website: N/A');
			}
			

			var opening_hours = result.opening_hours;//object
			if ( typeof opening_hours !== "undefined") {
				var open_now = opening_hours.open_now;
				var periods = opening_hours.periods;//object
			}else{
				$('#opening_hours').html('Opening hours: N/A');
			}
				
			
			var reviews = result.reviews;//object
			if ( typeof reviews !== "undefined") {
				//process reviews... or not
			}else{
				
			}

			//map.setCenter(pos);
		}else{
			alert('error: '+status);
		}
		
		
	},"json");
			
		
}

function calcDistance(lat1, lon1, lat2, lon2) {
	//Radius of the earth in:  1.609344 miles,  6371 km  | var R = (6371 / 1.609344);
	var R = 3958.7558657440545;
	// Radius of earth in Miles
	var dLat = toRad(lat2 - lat1);
	var dLon = toRad(lon2 - lon1);
	var a = (1.0 - Math.cos(dLat)) / 2.0 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * (1.0 - Math.cos(dLon)) / 2.0;
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	return (R * c).toFixed(2);

}

function toRad(Value) {
	/** Converts numeric degrees to radians */
	return Value * Math.PI / 180;
}

function showMap(){
	//Google Maps
	var pos = new google.maps.LatLng(lat,lng);
 	var mapOptions = {
    	zoom: 14,
    	mapTypeId: google.maps.MapTypeId.ROADMAP,
    	center : pos
  	}
  	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

	var marker = new google.maps.Marker({
			position: pos,
			map: map,
	});

	var infowindow = new google.maps.InfoWindow({
			content: formatted_addr
		  });
	var options = {
		  map: map,
		  position: pos,
		  content: formatted_addr
		};
	
	infowindow.setOptions(options);
	infowindow.open(map, marker);

}
function confirm(){
	window.history.go(-2);
	//window.location.replace('new_event.html?loc='+formatted_addr);
}

</script>

</body>
</html>